<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./favicon.ico" />
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>欢迎使用天大实验仪器预约系统</title>
    <style type="text/css">
        .cancel {
            color: black;
            background-color: red;
        }

        .reAsk {
            color: black;
            background-color: green;
        }
    </style>
</head>

<body>
    <!-- 头部制作 start-->
    <header class="header w">
        <div class="logo">
            <img src="./images/logo.jpg" alt="">
        </div>
        <div class="tit">
            <h3>天津大学化工学院</h3>
        </div>
        <div class="links">
            <div class="profile">
                <a href="">
                    <img src="./images/touxiang.jpg" alt="">
                </a>
            </div>
            <a href="login.html" class="zhuxiao">
                <h3>注销</h3>
            </a>
        </div>
    </header>
    <!-- 头部制作 end -->

    <!-- main start -->
    <div class="container">
        <!-- 页面日历 -->
        <!-- <div class="layui-inline" id="test2" style="margin-right: 15px;" lay-key="2">
                <div id="layui-laydate2" class="layui-laydate layui-laydate-static">
                    <div class="layui-laydate-main laydate-main-list-0">
                        <div class="layui-laydate-header"><i class="layui-icon laydate-icon laydate-prev-y"></i><i
                                class="layui-icon laydate-icon laydate-prev-m"></i>
                            <div class="laydate-set-ym"><span lay-ym="2020-8" lay-type="year">2020年</span><span
                                    lay-ym="2020-8" lay-type="month">8月</span></div><i
                                class="layui-icon laydate-icon laydate-next-m"></i><i
                                class="layui-icon laydate-icon laydate-next-y"></i>
                        </div>
                        <div class="layui-laydate-content">
                            <table>
                                <thead>
                                    <tr>
                                        <th>日</th>
                                        <th>一</th>
                                        <th>二</th>
                                        <th>三</th>
                                        <th>四</th>
                                        <th>五</th>
                                        <th>六</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td lay-ymd="2020-7-26" class="laydate-day-prev">26</td>
                                        <td lay-ymd="2020-7-27" class="laydate-day-prev">27</td>
                                        <td lay-ymd="2020-7-28" class="laydate-day-prev">28</td>
                                        <td lay-ymd="2020-7-29" class="laydate-day-prev">29</td>
                                        <td lay-ymd="2020-7-30" class="laydate-day-prev">30</td>
                                        <td lay-ymd="2020-7-31" class="laydate-day-prev">31</td>
                                        <td lay-ymd="2020-8-1" class="">1</td>
                                    </tr>
                                    <tr>
                                        <td lay-ymd="2020-8-2" class="">2</td>
                                        <td lay-ymd="2020-8-3" class="">3</td>
                                        <td lay-ymd="2020-8-4" class="">4</td>
                                        <td lay-ymd="2020-8-5" class="">5</td>
                                        <td lay-ymd="2020-8-6" class="layui-this">6</td>
                                        <td lay-ymd="2020-8-7" class="">7</td>
                                        <td lay-ymd="2020-8-8" class="">8</td>
                                    </tr>
                                    <tr>
                                        <td lay-ymd="2020-8-9" class="">9</td>
                                        <td lay-ymd="2020-8-10" class="">10</td>
                                        <td lay-ymd="2020-8-11" class="">11</td>
                                        <td lay-ymd="2020-8-12" class="">12</td>
                                        <td lay-ymd="2020-8-13" class="">13</td>
                                        <td lay-ymd="2020-8-14" class="">14</td>
                                        <td lay-ymd="2020-8-15" class="">15</td>
                                    </tr>
                                    <tr>
                                        <td lay-ymd="2020-8-16" class="">16</td>
                                        <td lay-ymd="2020-8-17" class="">17</td>
                                        <td lay-ymd="2020-8-18" class="">18</td>
                                        <td lay-ymd="2020-8-19" class="">19</td>
                                        <td lay-ymd="2020-8-20" class="">20</td>
                                        <td lay-ymd="2020-8-21" class="">21</td>
                                        <td lay-ymd="2020-8-22" class="">22</td>
                                    </tr>
                                    <tr>
                                        <td lay-ymd="2020-8-23" class="">23</td>
                                        <td lay-ymd="2020-8-24" class="">24</td>
                                        <td lay-ymd="2020-8-25" class="">25</td>
                                        <td lay-ymd="2020-8-26" class="">26</td>
                                        <td lay-ymd="2020-8-27" class="">27</td>
                                        <td lay-ymd="2020-8-28" class="">28</td>
                                        <td lay-ymd="2020-8-29" class="">29</td>
                                    </tr>
                                    <tr>
                                        <td lay-ymd="2020-8-30" class="">30</td>
                                        <td lay-ymd="2020-8-31" class="">31</td>
                                        <td lay-ymd="2020-9-1" class="laydate-day-next">1</td>
                                        <td lay-ymd="2020-9-2" class="laydate-day-next">2</td>
                                        <td lay-ymd="2020-9-3" class="laydate-day-next">3</td>
                                        <td lay-ymd="2020-9-4" class="laydate-day-next">4</td>
                                        <td lay-ymd="2020-9-5" class="laydate-day-next">5</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="layui-laydate-footer">
                        <div class="laydate-footer-btns"><span lay-type="clear" class="laydate-btns-clear">重置</span><span
                                lay-type="now" class="laydate-btns-now">现在</span><span lay-type="confirm"
                                class="laydate-btns-confirm">确定</span></div>
                    </div>
                </div>
            </div> -->

        <!-- 页面表格 -->
        <div class="tab_frame w">
            <div class="layui-tab layui-tab-brief">
                <!-- 表头 -->
                <ul class="layui-tab-title">
                    <li class="layui-this">简介</li>
                    <li>仪器预览</li>
                    <!-- <li>共享资源</li> -->
                    <li>我的预约</li>
                </ul>

                <!-- 表内容 -->
                <div class="layui-tab-content">
                    <!-- 简介 start -->
                    <div class="layui-tab-item layui-show">
                        <!-- <div class="update">
                                <h3>更新时间:2021/5/1</h3>
                            </div> -->

                        <!-- 公告 -->
                        <ul class="gonggao">
                            <li class="title">
                                <h1>这是一个有关使用预约平台的简介</h1>
                            </li>
                            <li class="content">
                                <h3>有关使用预约平台的简介有关使用预约平台的简介有关使用预约平台的简介有关使用预约平台的简介</h3>
                            </li>
                        </ul>
                    </div>
                    <!-- 简介 end -->

                    <!--仪器表格 start -->
                    <div class="layui-tab-item">
                        <table id="demo1" lay-filter="test1">
                            <thead>
                                <tr>
                                    <th lay-data="{field:'id', width:100 , sort:true, align: 'center'}">序号</th>
                                    <th lay-data="{field:'taskname', width:220, align: 'center'}">仪器名称</th>
                                    <th lay-data="{field:'relatedperson',width:160, align: 'center'}">仪器状态</th>
                                    <th lay-data="{field:'date',width:160, align: 'center'}">是否可预约</th>
                                    <th lay-data="{field:'file',width:160, align: 'center'}">使用次数</th>
                                    <th lay-data="{field:'publisher',width:160, align: 'center'}">备注</th>
                                </tr>
                            </thead>

                            <!-- <tbody>
                                    <tr th:each="instrument : ${instrument}">
                                        <td th:text="${instrument.num}">序号</td>
                                        <td th:text="${instrument.name}">仪器名称</td>
                                        <td th:text="${instrument.state}">仪器状态</td>
                                        <td th:text="${instrument.bookable}">是否可预约</td>
                                        <td>dd</td>
                                        <td>dd</td>
                                    </tr>
                                </tbody> -->

                            <tbody>
                                <tr>
                                    <td>001</td>
                                    <td>电子显微镜 [审]</td>
                                    <td>使用中</td>
                                    <td>是</td>
                                    <td>234</td>
                                    <td></td>
                                </tr>

                                <tr>
                                    <td>002</td>
                                    <td>全自动消解仪</td>
                                    <td>使用中</td>
                                    <td>是</td>
                                    <td>43</td>
                                    <td></td>
                                </tr>

                                <tr>
                                    <td>003</td>
                                    <td>氡钍测定仪</td>
                                    <td>维修中</td>
                                    <td>否</td>
                                    <td>124</td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--仪器预览 end-->

                    <!--共享资源 start-->
                    <!-- <div class="layui-tab-item center">
                            <table id="demo2" lay-filter="test2" class="download">
                                <thead>
                                    <tr>
                                        <th lay-data="{field:'filename',width:200, align: 'center'}">文件名称</th>
                                        <th lay-data="{field:'download',width:100, align: 'center'}">下载</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>001</td>
                                        <td><i class="layui-icon layui-icon-download-circle"></i> </td>
                                    </tr>
                                </tbody>
                            </table>

                        </div> -->
                    <!--共享资源 end-->

                    <!--我的预约 start-->
                    <div class="layui-tab-item">
                        <table id="demo1" lay-filter="test1">
                            <thead>
                                <tr>
                                    <th lay-data="{field:'id', width:80 , sort:true, align: 'center'}">序号</th>
                                    <th lay-data="{field:'taskname', width:150, align: 'center'}">仪器名称</th>
                                    <th lay-data="{field:'relatedperson',width:130, align: 'center'}">预约状态</th>
                                    <th lay-data="{field:'option', width:120, align: 'center'}">操作</th>
                                    <th lay-data="{field:'date',width:220, align: 'center'}">使用时段</th>
                                    <th lay-data="{field:'file',width:130, align: 'center'}">仪器状态</th>
                                    <th lay-data="{field:'publisher',width:100, align: 'center'}">审核人</th>
                                </tr>
                            </thead>

                            <tbody>
                                <!-- <tr th:each="userInstrument: ${userInstrument}">
                                        <td th:text="${userInstrument.num}">序号</td>
                                        <td th:text="${userInstrument.name}">仪器名称</td>
                                        <td th:text="${userInstrument.book_state}">预约状态</td>
                                        <td th:text="${userInstrument.time_piece}">使用时段</td>
                                        <td th:text="${userInstrument.use_state}">使用状态</td>
                                        <td>dd</td>
                                    </tr> -->

                                <tr>
                                    <td>001</td>
                                    <td>电子显微镜</td>
                                    <td>预约成功</td>
                                    <td><button class='cancel'>取消预约</button></td>
                                    <td>2021/5/30 16:00 - 18:00</td>
                                    <td>正常</td>
                                    <td>王老师</td>
                                </tr>

                                <tr>
                                    <td>002</td>
                                    <td>全自动消解仪</td>
                                    <td>取消成功</td>
                                    <td><button class='reAsk'>重新预约</button></td>
                                    <td>2021/5/30 16:00 - 18:00</td>
                                    <td>正常</td>
                                    <td>张老师</td>
                                </tr>

                                <tr>
                                    <td>003</td>
                                    <td>氡钍测定仪</td>
                                    <td>驳回: 仪器故障</td>
                                    <td><button class='reAsk'>重新预约</button></td>
                                    <td>/</td>
                                    <td>维修中</td>
                                    <td>李老师</td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                    <!--我的预约 end-->

                </div>
                <!-- 中央大表哥end -->

            </div>
        </div>
    </div>
    <!-- main end -->

    <!-- 底部制作 start -->
    <footer class="footer w">
        <div class="mod_copyright w">
            <div cSlass="links">
                <a href="">联系我们</a>
            </div>
            <div class="copyright">
                @天津大学化工学院 版权所有
            </div>
        </div>
    </footer>
    <!-- 底部制作 end -->

    <script src="./layui/layui.js"></script>
    <script>
        //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
        layui.use(['element', 'table', 'laydate'], function () {
            var element = layui.element;
            var table = layui.table;
            var laydate = layui.laydate;

            //转换静态表格
            table.init('test1', {
                height: 315 //设置高度
                , width: 967

                // , limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
                //支持所有基础参数
            });
            table.init('test2', {
                height: 315 //设置高度
                , width: 303
                // , limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
                //支持所有基础参数
            });


        });
    </script>
</body>

</html>